<template>
	<view class="content">
		<view class="item" @click="open">
			<view class="item-left">昵称</view>
			<view class="item-right">{{nickname}}</view>
		</view>
		<view class="item">
			<view class="item-left">头像</view>
			<view  class="item-right" @click="changeAvatar">
				<image class="img01" :src="avatar ? avatar : '/static/user.png'" mode="widthFix"></image>
				<!-- <image class="img02" src="../../static/r.png" mode="widthFix"></image> -->
			</view>
		</view>
		<view class="item">
			<view class="item-left">性别</view>
			<view class="item-right">
				<picker @change="genderChange" :value="gender" :range="gender_list">
					<view class="uni-input">{{gender_list[gender]}}</view>
				</picker>
			</view>
		</view>
		
		<view class="item" @click="toBindTel">
			<view class="item-left">联系方式</view>
			<view class="item-right" v-if="mobile.length > 0">{{mobile}}</view>
			<view class="item-right" v-else>绑定手机</view>
		</view>
		
		<view class="item">
			<view class="item-left">绑定微信</view>
			<view class="item-right" v-if="openid.length > 0">已绑定</view>
			<view class="item-right" @click="getUserDetail" v-else>绑定微信</view>
		</view>
		
		<view class="item" @click="openAddress">
			<view class="item-left">地址</view>
			<view class="item-right">{{address}}</view>
		</view>

		<view class="fabu">
			<button type="primary" @click="editUser" :disabled="btnFlag">确定</button>
		</view>

		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog ref="inputClose" title="请输入新的昵称" mode="input" :value="newNickname" :duration="2000"
				:before-close="true" @close="close" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="popupAddress" type="dialog">
			<uni-popup-dialog ref="inputCloseAddress" title="请输入新的地址" mode="input" :value="newAddress" :duration="2000"
				:before-close="true" @close="closeAddress" @confirm="dialogInputConfirmAddress"></uni-popup-dialog>
		</uni-popup>
							
							
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				nickname: '',
				newNickname: '',
				avatar: '',
				gender: '',
				avatarsl20: '',
				mobile: '',
				openid: '',
				address: '',
				newAddress: '',
				btnFlag: false,
				gender_list: [
					'未知','男','女'
				]
			}
		},
		computed: {
			...mapState(['userinfo']),
			...mapState(['systemData']),
		},
		watch: {
			// 检测userinfo的变化
			userinfo(newVal) {
				//userinfo 变好了
				console.log('watch userinfo变化了', newVal)
			},
		},
		onShow() {
			//未登录检测,跳转到登录页面
			if (!this.userinfo) {
				uni.showToast({
					title:'请先微信登录',
					success() {
						uni.navigateTo({
                url: '/pages/login/login?reffer=' + window.location.href
						})
					}
				})
			
				return
			}
			
			// 微信分享
			this.shareWx('', '修改资料')
			
			this.nickname = this.userinfo.nickname
			this.avatar = this.userinfo.avatar_text
			this.gender = this.userinfo.gender
			this.mobile = this.userinfo.mobile
			this.openid = this.userinfo.openid
			this.address = this.userinfo.address
			
			
			console.log(this.userinfo)
		},
		methods: {
			//绑定微信
			getUserDetail(){
				window.location.href= this.systemData.apihost + '/api/wx/getUserDetail?bindtel=1&user_id='+this.userinfo.id;
			},
			// 绑定手机号码
			toBindTel(){
				uni.navigateTo({
					url: '/pages/bindtel/bindtel'
				})
			},
			// 更改性别
			genderChange(e){
			  this.gender = e.target.value
			},
			open() {
				this.$refs.popup.open()
			},
			openAddress(){
				this.$refs.popupAddress.open()
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			closeAddress() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popupAddress.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			dialogInputConfirm(val, value) {
				// 输入框的值
				this.nickname = value
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			
			dialogInputConfirmAddress(val, value) {
				// 输入框的值
				this.address = value
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popupAddress.close()
			},
			/**
			 * 点击上传头像
			 */
			changeAvatar() {
				const _this = this
				uni.chooseImage({
					count: 1, //默认9
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));

						uni.showLoading({
							title: '上传中'
						})

						_this.$api.get_token_from_qiniu({}).then(result => {

							if (result.ret == 1) {
								var token = result.data.token;

								const {
									tempFilePaths
								} = res

								tempFilePaths.forEach((item, index) => {

									uni.uploadFile({
										url: 'https://up-z1.qiniup.com/',
										filePath: item,
										name: 'file',
										formData: {
											'token': token
										},
										success: (uploadFileRes) => {
											let json = JSON.parse(uploadFileRes
												.data);
											// 上传到服务器fa_file中
											_this.$api.upload_qiniu({
												'hash': json.hash
											});

											// 给到头像
											_this.avatar =
												'http://static.dadi30.com/' +
												json.hash

										},
										complete: () => {
											setTimeout(function() {
												uni.hideLoading();
											}, 250);
										},
									});
								})
								// console.log(_this.imageList)

							}

						})

					}
				});
			},
			/**
			 * 修改用户头像和昵称
			 */
			editUser() {
				const _this = this

				if(_this.nickname == ''){
					uni.showToast({
					    title: '昵称不能为空',
					    icon: 'none',
					    mask: true,
					})
					return
				}
				
				if(_this.avatar == ''){
					uni.showToast({
					    title: '头像不能为空',
					    icon: 'none',
					    mask: true,
					})
					return
				}
				
				var data = {
					id: _this.userinfo.id,
					nickname: _this.nickname,
					avatar: _this.avatar,
					gender: _this.gender,
					address: _this.address
				};

				// 禁止点击
				_this.btnFlag = true

				this.$api.editUser(data).then(ret => {

					if (ret.code == 1) {
						
						// 重新设置 vuex-userinfo
						_this.$store.dispatch('set_userinfo', ret.data)
						
						uni.showToast({
							title: '更新成功',
							success() {
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/tabbar/my/my'
									});
								}, 1000)
						
							}
						})

					} else {
						_this.btnFlag = false
					}

				})
			}
		}
	}
</script>

<style lang="scss">
	.item {
		padding: 20px 30px 20px 20px;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
		align-items: center;
		background: url(../../static/r.png) no-repeat;
		background-size: 30px 30px;
		background-position: right center;

		.item-left {
			color: #3b4144;
		}

		.item-right {
			max-width: 70%;
			image {
				width: 40px;
			}
			
			.img01{
				width: 40px;
				max-height: 50px;
			}

			.img02 {
				width: 10px;
			}
		}
	}

	.fabu {
		position: fixed;
		bottom: 30px;
		left: 0;
		right: 0;
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;

		button {
			background: #f07373;
		}
	}
</style>
